import React, { useEffect, useState } from 'react'
import { Button, Tabs, Modal, Card, Switch } from 'antd'
import { useModel } from 'umi'
import SelfPickupPoint from './SelfPickupPointList'

import styles from './Deliver.less'

// express_delivery #配送开关 0 1
// own_take         #自提开关 0 1

const { confirm } = Modal

export default () => {
  const { GetSettle, SaveDeliverySettings } = useModel('Deliver')
  const [tabItem, setTabItem] = useState([])
  const [deliverConfig, setDeliverConfig] = useState({})
  const [switchLoading, setSwitchLoading] = useState(false)

  const originTabItem = [
    {
      key: '1',
      label: '快递发货',
      children: (
        <>
          <Card
            style={{ background: '#F7F8FA' }}
            title={
              <div className={styles.card_title_line}>
                <>快递发货功能</>
                <Switch
                  checkedChildren='开启'
                  unCheckedChildren='关闭'
                  onChange={e => handleSwitch('delivery', e)}
                  checked={deliverConfig.express_delivery}
                  loading={switchLoading}
                ></Switch>
              </div>
            }
          >
            【默认启用】启用后，买家下单可以选择快递发货，由你安排快递送货上门。
          </Card>
        </>
      )
    },
    {
      key: '2',
      label: '上门自提',
      children: (
        <>
          <Card
            style={{ background: '#F7F8FA' }}
            title={
              <div className={styles.card_title_line}>
                <>买家上门自提</>
                <Switch
                  checkedChildren='开启'
                  unCheckedChildren='关闭'
                  onChange={e => handleSwitch('pickup', e)}
                  checked={deliverConfig.own_take}
                  loading={switchLoading}
                ></Switch>
              </div>
            }
          >
            启用上门自提功能后，用户可以就近选择你预设的自提点，下单后你需要尽快将商品至用户指定自提点。
          </Card>

          {deliverConfig.own_take ? <SelfPickupPoint></SelfPickupPoint> : null}
        </>
      )
    }
  ]

  const getInfo = async () => {
    const res = await GetSettle()
    setDeliverConfig({
      express_delivery: !!res.express_delivery,
      own_take: !!res.own_take
    })
  }

  const handleSwitch = async (key, value) => {
    const action = async () => {
      setSwitchLoading(true)
      const res = await SaveDeliverySettings({
        type: key,
        status: value ? 1 : 0
      })
      setSwitchLoading(false)
      if (res) {
        getInfo()
      }
    }
    if (value) {
      action()
    } else {
      confirm({
        title: key === 'delivery' ? `系统提醒` : '确认关闭自提功能',
        content: key === 'delivery' ? '至少需要开启快递发货、上门自提中的一种配送方式，店铺才能正常经营。' : '关闭此开关将会影响后续的商品配送方式，将不支持上门自提（关闭前并且审核通过的自提订单不受影响），请确认是否确认关闭',
        okText: key === 'delivery' ? '我知道了' : '确认关闭',
        cancelText: '取消',
        style:{padding:'32px 20px'},
        onOk() {
          action()
        },
        onCancel() {},
      })
    }
    
  }

  useEffect(() => {
    getInfo()
  }, [])

  useEffect(() => {
    setTabItem(originTabItem)
  }, [deliverConfig, switchLoading])

  return (
    <Card>
      <Tabs defaultActiveKey='1' items={tabItem}></Tabs>
    </Card>
  )
}
